<template>
    <div id="tableData" >
        <el-table
                :data="tableData"
                height="250"
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="序号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="日期"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>
            <el-table-column
                    prop="operation"
                    label="操作">
                <template slot-scope="scope">
                     <el-button
                         size="mini"
                         type="primary"
                         @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                     <el-dialog
                         title="修改"
                         :visible.sync="editBox"
                         width="50%">
                         <span>
                          请输入ID    <el-input
                                         placeholder="请输入ID"
                                         v-model="user.id"
                                         clearable>
                                     </el-input>
                         </span>

                         <span class="demonstration">请选择日期</span>
                             <el-date-picker
                                     v-model="user.date"
                                     type="date"
                                     placeholder="选择日期"
                                     format="yyyy-MM-dd"
                                     value-format="yyyy-MM-dd"
                                     style="height: 100%;width: 100%">
                             </el-date-picker>

                         <span>请输入姓名</span>
                             <el-input
                                     placeholder="请输入姓名"
                                     v-model="user.name"
                                     clearable>
                             </el-input>

                         <span>请输入地址</span>
                             <el-input
                                     placeholder="请输入地址"
                                     v-model="user.address"
                                     clearable>
                             </el-input>
                         <span slot="footer" class="dialog-footer">
                            <el-button
                                    type="primary"
                                    size="mini"
                                    @click="updates">确 定</el-button>
                         </span>
                     </el-dialog>
                     <el-button
                                 size="mini"
                                 type="danger"
                                 @click="handleDelete(scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-form ref="form" :model="tableData" label-width="80px">
            <el-form-item label="序号">
                <el-input v-model="tableData.id"></el-input>
            </el-form-item>
            <el-form-item label="日期">
                <el-input v-model="date"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    style="height: 100%;width: 100%">
                </el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="name">

                </el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="address"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" size="mini" @click="add">增加</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>


<script>
    export default {
        name: "TableData",
        data() {
            return {
                date:'',
                name: '',
                address: '',
                editIndex:'',

                user:{},
                tableData: [{
                    id:'1',
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id:'2',
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id:'3',
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id:'4',
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id:'5',
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id:'6',
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id:'7',
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }]
            }
        }
        , methods: {
            handleEdit(index,row) {
                console.log(index,row)
                this.editBox = true
                this.user=row
                this.editIndex=index
            },
            updates(){
                this.tableData.splice(this.editIndex,1,this.user)
                this.editBox = false
                this.$message({
                    message: '修改成功',
                    type: 'success'
                });
            },
            handleDelete(index) {
                console.log(index);
                this.tableData.splice(index,1)
                this.$message({
                    message: '删除成功',
                    type: 'success'
                });
            },
            add(){

                this.tableData.push({
                    id:this.tableData.length+1,
                    date: this.date,
                    name: this.name,
                    address: this.address
                })

                this.$message({
                    message: '添加成功',
                    type: 'success'
                });

            }
        }
    }
</script>

<style scoped>

</style>